<template>
  <div id="_rejectLay" class="smallLay">
    <div class="smallLayTitle"><b>{{bpmcoreI18n.titleReject}}</b></div>
    <div class="smallLayContent">
      <div style="font-size:10pt">{{bpmcoreI18n.textReject}}: <select id="_rejectToActivity" v-model="rejectToActivity" style="">
        <option v-for="(val,i) in rejectActivities" :key="i" :value="val.activityId" selected="">{{val.activityName}}</option>
        <!--<option value="bpdid:946c5cb79488d0cb:-19368138:1505061bcce:-4510" selected="">审批</option>-->
      </select>
        <span id="_rejectErrorMsg" style="font-size:10pt;color:red;font-weight:bold;margin-left:20px">{{commentNotNull}}</span>
      </div>
      <div>
        <!--<textarea class="commentsTxtare" id="_rejectCommentsId" style="height: 50px;width: 550px;"-->
                     <!--onkeyup="resourceUtil.validInputLength(this,300,'_rejectRemnant')"></textarea>-->
        <textarea class="commentsTxtare" id="_rejectCommentsId" style="height: 50px;width: 550px;" @click="commentsClick" @blur="commentsBlur"
                  maxlength="300" v-model="displayComments"></textarea>
        <div style="text-align:right;padding-right:5px"><font color="blue" id="_rejectRemnant">({{showInputLength}}/300)</font></div>
      </div>
      <!--<div style="text-align:center"><a href="#" style="text-decoration: none;" data-ext="okBtn"-->
                                        <!--@click="rejectOKBtnClicked" class="buttonbg">确定</a>&nbsp;&nbsp;-->
        <!--<a href="#" style="text-decoration: none;" @click="rejectCancelBtnClicked" class="buttonbg">取消</a>-->
      <!--</div>-->
      <div style="text-align:center"><input type="button" data-ext="okBtn" id="divLayRejctOKBtn" :value="bpmcoreI18n.btnOk"
                                            v-show ="okBtnShow"
                                            @click="rejectOKBtnClicked">&nbsp;&nbsp;
        <input type="button" :value="bpmcoreI18n.btnCancel" @click="rejectCancelBtnClicked"></div>
    </div>
  </div>
</template>
<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'bpmDRejectdialog',
  data () {
    return {
      okBtnShow: true,
      commentNotNull: ''
    }
  },
  computed: {
    ...mapState(['bpmcoreI18n', 'rejectTo', 'rejectActivities', 'bizData', 'comments', 'targetUsers', 'comments', 'target', 'lang', 'approvalType', 'approvalTypeEnum']),
    showInputLength: function () {
      return this.comments.length + ''
    },
    displayComments: {
      get () {
        return this.comments
      },
      set (value) {
        this.setComments(value)
      }
    },
    rejectToActivity: {
      get () {
        return this.rejectTo
      },
      set (value) {
        this.setRejectTo(value)
      }
    }
  },
  props: {},
  methods: {
    ...mapActions(['setRejectTo', 'setIsRejectFlowDialogVisible', 'setComments', 'setIsRejectVerify', 'setIsRejectConfirmVerify', 'setIsConfirmVerify', 'setIsSubmitVerify', 'startProcess', 'setIsStartProc', 'setIsFlowDialogVisible']),

    rejectOKBtnClicked () {
      // 隐藏确认按钮，防止快速连续点击
      this.okBtnShow = false
      this.$store.state.totalShadeShow = true
      setTimeout(() => {
        console.log('reject dialog selected rejectTo activity:', this.rejectTo)
        if (this.rejectTo === null || this.rejectTo.trim() === '') {
          this.alert(this.bpmcoreI18n.msgRejectNotConfig)
          this.okBtnShow = true
          this.$store.state.totalShadeShow = false
          return
        }
        if (this.comments === null || this.comments.trim() === '') {
          this.commentNotNull = this.bpmcoreI18n.msgCommentsRequired
          this.okBtnShow = true
          this.$store.state.totalShadeShow = false
          return
        }
        this.setIsRejectVerify(false)
        this.$emit('rejectOKBtnClicked')
      }, 100)
    },
    rejectCancelBtnClicked () {
      this.okBtnShow = true
      // 点击取消，隐藏dialog,校验位置为false，防止首次成功后续失败的情况
      this.setIsRejectFlowDialogVisible(false)
      this.setIsRejectVerify(false)
      this.setIsRejectConfirmVerify(false)
    },
    commentsClick () {
      console.log('comments clicked before>>>>>>>>>>>>', this.comments)
      if (this.comments === '同意' || this.comments.toUpperCase() === 'OK' || this.comments === '同意@OK') {
        this.setComments('')
      }
      console.log('comments clicked after>>>>>>>>>>>>', this.comments)
    },
    commentsBlur () {
      console.log('comments blur before>>>>>>>>>>>>', this.comments)
      if (this.comments === '') {
        if (this.lang === 'zh') {
          this.setComments('同意')
        } else {
          this.setComments('OK')
        }
      }
      console.log('comments blur after>>>>>>>>>>>>', this.comments)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .smallLay {
    width: 600px;
    height: 194px;
    background-color: #cbd3e0;
    border: 1px solid #909497;
    color: #333;
    line-height: 24px;
    text-align: left;
    -webkit-box-shadow: 5px 2px 6px #000;
    -moz-box-shadow: 3px 3px 6px #555;
  }

  .smallLayTitle {
    background: url(/static/images/ecsbpm/smallLayBG.jpg) repeat-x center top;
    height: 32px;
    color: #48515a;
  }

  .smallLayTitle b {
    padding-left: 12px;
    color: #48515a;
    font-size: 14px;
    line-height: 33px;
  }

  .smallLayContent {
    background-color: #fff;
    border: 1px solid #9da4be;
    height: 131px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 12px;
  }

  .commentsTxtare {
    height: 96px;
    width: 550px;
  }
</style>
